<template>
  <div class="divs">
    <div class="manager_detail">
      fabricjs拖拽缩放
      <canvas
        id="canvas"
        width="1920"
        height="550"
        border="1px solid red"
      ></canvas>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  watch: {},
  data() {
    return {
      panning: false,
      zoomPoint: new fabric.Point(0, 0), //初始时缩放原点的位置设为（0,0），这是页面的左上顶点
      lastzoomPoint: { x: 0, y: 0 }, //初始时，前一次缩放原点同样为(0,0)
      lastmousePoint: { x: 0, y: 0 }, //进行缩放，需要对此刻缩放位置进行保存，来计算出缩放原点，此刻初始时设为0,0
      lastzoom: 1, //表示为上一次的缩放倍数，此刻设为1
      relativeMouseX: 0, //表示相对的鼠标位移，用来记录画布的绝对移动距离
      relativeMouseY: 0, //表示相对的鼠标位移，用来记录画布的绝对移动距离
    };
  },
  methods: {
    initCanvas() {
      // 1. 实例化canvas 画布
      var canvas = new fabric.Canvas("canvas");
      // 2. 设置背景图片作为底图（这里导入图片使用require，不要 使用 '../../' 方式）
      // canvas.width / 4764  （4764 是我底图图片宽度）
      // canvas.height / 3367 （3367 是我底图图片宽度）
      canvas.setBackgroundImage(
        require("../../../public/static/image/4bi3.png"),
        canvas.renderAll.bind(canvas),
        {
          // scaleX: canvas.width / 4764,
          // scaleY: canvas.height / 3367,
        }
      );
      canvas.on({
        //鼠标按下事件
        "mouse:down": (e) => {
          this.panning = true;
          canvas.selection = false;
        },
        // 鼠标抬起事件
        "mouse:up": (e) => {
          this.panning = false;
          canvas.selection = true;
        },
        // 移动画布事件
        "mouse:move": (e) => {
          if (this.panning && e && e.e) {
            let delta = new fabric.Point(e.e.movementX, e.e.movementY);
            canvas.relativePan(delta);
            // this.relativeMouseX += e.e.movementX; //累计每一次移动时候的偏差
            // this.relativeMouseY += e.e.movementY;
            // console.log(this.relativeMouseX);
          }
        },
        // 鼠标滚动画布放大缩小
        "mouse:wheel": (e) => {
          this.zoom = (event.deltaY > 0 ? -0.1 : 0.1) + canvas.getZoom();
          this.zoom = Math.max(0.6, this.zoom); //最小为原来的1/10
          this.zoom = Math.min(2, this.zoom); //最大是原来的3倍
          this.zoomPoint = new fabric.Point(e.pointer.x, e.pointer.y);
          console.log(e.pointer.x, e.pointer.y);
          canvas.zoomToPoint(this.zoomPoint, this.zoom);

          this.lastzoomPoint.x =
            this.lastzoomPoint.x +
            (this.zoomPoint.x - this.lastmousePoint.x - this.relativeMouseX) /
              this.lastzoom;
          this.lastzoomPoint.y =
            this.lastzoomPoint.y +
            (this.zoomPoint.y - this.lastmousePoint.y - this.relativeMouseY) /
              this.lastzoom;

          this.lastmousePoint.x = this.zoomPoint.x;
          this.lastmousePoint.y = this.zoomPoint.y;
          this.lastzoom = this.zoom;

          this.tempmouseX = this.relativeMouseX;
          this.tempmouseY = this.relativeMouseY;
          this.relativeMouseX = 0;
          this.relativeMouseY = 0;
        },
      });
    },
  },
  created() {},
  mounted() {
    this.initCanvas();
  },
};
</script>
<style scoped>
.divs {
  display: flex;
}
.manager_detail {
  width: 100%;
  height: calc(100vh - 112px);
  /* height: 100%; */
  overflow: hidden;
  border: 1px solid red;
  background: pink;
}
</style>
